<!-- 最近二周上传曲线 -->
<template>
<div class="last-2-weeks-wp" ref="echart"></div>
</template>
<script>
export default {
  name: 'last-2-weeks',
  data () {
    return {
      oEchart: null,
      myChart: null,
    }
  },
  mounted () {
    this.initEchart();
  },
  methods: {
    initEchart () {
      this.oEchart = this.$refs.echart;
      this.myChart = this.$echarts.init(this.oEchart);
      // this.myChart.showLoading();

      this.setOption();
    },

    setOption () {
      var option={
        color: ['#2FC25B'],
        grid: {
          top: '50',
          left: '2%',
          right: '2%',
          bottom: '0',
          containLabel: true
        },
        //标题
        title:{
          text:'最近2周上传曲线',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 20
          }
        },
        //图例-每一条数据的名字叫销量
        legend:{
          right: 0,
          data:['上传量']
        },
        //x轴
        xAxis:{
          axisLine: {
            lineStyle: {
              color: '#D7D7D7'
            }
          },
          axisLabel: {
            color: '#555556'
          },
          data:["11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日","23日","24日"]
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis:{
          axisLine: {
            show: false,
            lineStyle: {
              color: '#D7D7D7'
            }
          },
          axisLabel: {
            color: '#555556'
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        //数据-data是最终要显示的数据
        series:[{
          name:'上传量',
          type:'line',
          data:[40,20,35,60,55,10,45,91,32,65,15,32,67,80]
        }]
      };

      // this.myChart.hideLoading();
      this.myChart.setOption(option);
    },
  }
}
</script>
<style lang="scss" scoped>
.last-2-weeks-wp {
  height: 310px;
}
</style>